<template>
	<view v-if="show" class="modal-select-container" @touchmove.stop.prevent>
		<view class="select">
			<view class="select-hd" @touchmove.stop.prevent>
				<view
					v-if="clearable"
					class="select-btn-cancel"
					hover-class="opacity"
					:hover-stay-time="150"
					@click="reset"
				>
					清空
				</view>
				<view
					v-else
					class="select-btn-cancel"
					hover-class="opacity"
					:hover-stay-time="150"
					@click="cancel"
				>
					取消
				</view>
				<view
					class="select-btn-confirm"
					hover-class="opacity"
					:hover-stay-time="150"
					@click="confirm"
				>
					确定
				</view>
			</view>
			<view class="select-title">
				<view class="select-title-item">{{ title }}</view>
			</view>
			<view class="select-bd">
				<picker-view
					class="select-picker-view"
					:value="currentValue"
					@change="handleChange"
					@pickstart="scrolling = true"
					@pickend="scrolling = false"
				>
					<picker-view-column>
						<view
							class="select-column-item"
							:style="{ fontSize: size + 'rpx' }"
							v-for="(item, index) in list"
							:key="index"
						>
							{{ item.label }}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		<view class="modal-mask" @click="cancel"></view>
	</view>
</template>

<script>
export default {
	name: 'Select',
	props: {
		// 列表
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 标题
		title: {
			type: String,
			default: ''
		},
		// 字体大小
		size: {
			type: Number,
			default: 30
		},
		clearable: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		list(nVal) {
			this.index = 0;
		}
	},
	data() {
		return {
			show: false,
			scrolling: false,
			onResolve: null,
			onReject: null,
			index: 0
		};
	},
	computed: {
		currentValue() {
			return [this.index];
		}
	},
	methods: {
		open() {
			this.show = true;
			return new Promise((resolve, reject) => {
				this.onResolve = resolve;
				this.onReject = reject;
			});
		},
		setValue(value) {
			this.index = this.list.findIndex(e => e.value === value);
		},
		cancel() {
			this.show = false;
			this.onReject();
		},
		confirm() {
			if (this.scrolling) return;
			this.show = false;
			this.onResolve(this.list[this.index]);
		},
		reset() {
			if (this.scrolling) return;
			this.show = false;
			this.onResolve({ value: '', label: '' });
		},
		handleChange(e) {
			this.index = e.detail.value[0];
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-select-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: $z-index-popup + 1;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: $z-index-popup + 1;
}

.select {
	position: relative;
	z-index: $z-index-popup + 2;
	width: 100%;
	box-shadow: 0px 3rpx 10rpx 0px rgba(0, 0, 0, 0.1);

	&-hd {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 90rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		background-color: #fff;
		border-bottom: 1rpx solid rgba($color: #efefef, $alpha: 1);
	}
	&-btn-cancel {
		color: #888;
	}
	&-btn-confirm {
		color: $type-primary;
	}
	&-title {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 52rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		font-size: 24rpx;
		color: #555;

		&-item {
			flex: 1;
			text-align: center;
		}
	}
	&-bd {
		width: 100%;
		height: 520rpx;
		overflow: hidden;
		background-color: #fff;
	}
	&-picker-view {
		height: 100%;
	}
	&-column-item {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #444444;
	}
}

.opacity {
	opacity: 0.5;
}
</style>
